<template>
  <div>
    <div class="research-box">
      <el-form :inline="true" :model="searchData.research" class="demo-form-inline">
        <el-form-item label="标题">
          <el-input v-model="searchData.research.title" placeholder="请输入关键字" />
        </el-form-item>
        <el-form-item label="详情">
          <el-input v-model="searchData.research.introduce" placeholder="请输入关键字" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="dataList.comList" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="title" label="标题" width="180" />
      <el-table-column prop="introduce" label="详情" />
    </el-table>
    <el-pagination @current-change="currentChange" @size-change="sizeChange" layout="prev, pager, next" :total="searchData.research.count" />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, watch } from '@vue/runtime-core'
import { relative } from 'path'
import { getGoodsList } from '../../api/api'
import { InitData, goodsList } from '../../type/goods'
let searchData = reactive(new InitData())
// const res = await getGoodsList()
// console.log(res)
const onCount = async () => {
  const res = await getGoodsList()
  console.log('res', res)
  searchData.list = res.data
  console.log(searchData)
  searchData.research.count = res.data.length
}
const dataList = reactive({
  comList: computed(() => {
    return searchData.list.slice((searchData.research.page - 1) * searchData.research.pagesize, searchData.research.page * searchData.research.pagesize)
  }),
})
//分页器相关函数
const currentChange = (page: number) => {
  searchData.research.page = page
}
const sizeChange = (pagesize: number) => {
  searchData.research.page = pagesize
}
//点击搜索
const onSubmit = () => {
  let arr: goodsList[] = []
  if (searchData.research.title || searchData.research.introduce) {
    if (searchData.research.title) {
      arr = searchData.list.filter((value) => {
        //过滤列表的标题
        return value.title.indexOf(searchData.research.title) != -1
      })
    } else if (searchData.research.introduce) {
      arr = searchData.list.filter((value) => {
        //过滤列表的标题
        return value.introduce.indexOf(searchData.research.introduce) != -1
      })
    } else {
      arr = searchData.list
    }
    searchData.research.count = arr.length
    searchData.list = arr
  }
}
//watch监视搜索条件变化
watch([() => searchData.research.title, () => searchData.research.introduce], () => {
  if (searchData.research.title === '' && searchData.research.introduce === '') {
    onCount()
  }
})
onMounted(() => {
  onCount()
})
</script>

<style lang="less" scoped></style>
